<template>
    <div class="createPost-container">

        <el-form ref="newsForm" :rules="rules" :model="newsForm" class="form-container">
            <div class="createPost-main-container">
                <el-row>
                    <el-col :span="21">
                        <el-form-item style="margin-bottom: 40px;" prop="title">
                            <MDinput name="title" v-model="newsForm.title" required :maxlength="100">
                                标题
                            </MDinput>
                            <span v-show="newsForm.title.length>=26" class='title-prompt'>文字太长可能会被隐藏</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="21">
                        <el-form-item prop="intro" style="margin-bottom: 40px;"  label="摘要:">
                            <el-input type="textarea" class="article-textarea" :rows="1" autosize placeholder="请输入内容" v-model="newsForm.intro">
                            </el-input>
                            <span class="word-counter" v-show="contentShortLength">{{contentShortLength}}字</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="21">
                        <el-form-item prop="cover_file_id" style="margin-bottom: 40px;" label="封面图片:">
                            <upload-image :file-list="uploadFiles" @upload-success="uploadSuccess" @remove-file="removeFile"></upload-image>
                        </el-form-item>
                    </el-col>
                    <el-col :span="21">
                        <div class="editor-container">
                            <Tinymce :height=400 ref="editor" v-model="newsForm.artcontent"></Tinymce>
                        </div>
                    </el-col>
                    <el-col>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm('newsForm', 0)" :loading="subSaveLoading">保存</el-button>
                            <el-button type="success" @click="submitForm('newsForm', 1)" :loading="subPushLoading">立即发布</el-button>
                            <el-button @click="$router.back()">返回</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
        </el-form>
    </div>
</template>
<script>
    import MDinput from '@/components/MDinput'
    import UploadImage from '@/components/UploadImage'
    import Tinymce from '@/components/Tinymce'
    import NewsApi from '../../../api/news'
    import {parseFilePath} from '../../../utils/common'
    export default {
      components: {
        MDinput,
        UploadImage,
        Tinymce
      },
      data () {
        return {
          newsForm: {
            title: '',
            intro: '',
            cover_file_id: '',
            artcontent: '',
            status: 0
          },
          rules: {
            title: [
              {required: true, message: '请输入新闻标题', trigger: 'blur'}
            ],
            intro: [
              {required: true, message: '请输入新闻摘要', trigger: 'blur'}
            ],
            cover_file_id: [
              {required: true, message: '请上传封面图', trigger: 'blur'}
            ]
          },
          subSaveLoading: false,
          subPushLoading: false,
          uploadFiles: []
        }
      },
      computed: {
        contentShortLength () {
          return this.newsForm.intro.length
        }
      },
      created () {
        const self = this
        if (this.$route.params.id) {
          NewsApi.getNewsById(this.$route.params.id).then(response => {
            const result = response.data.data
            self.newsForm = {
              title: result.title,
              intro: result.intro,
              cover_file_id: result.cover.data ? result.cover.data.id : '',
              artcontent: result.content
            }
            if (result.cover.data) {
              self.uploadFiles.push({name: parseFilePath(result.cover.data.path).base, url: result.cover.data.fullPath, response: result.cover})
            }
          }, () => {
            self.$router.replace({name: 'Error404'})
          })
        }
      },
      methods: {
        submitForm (formName, status) {
          const self = this
          this.$refs[formName].validate((valid) => {
            if (valid) {
              self.newsForm.status = status
              self.postNews()
            } else {
              return false
            }
          })
        },
        postNews () {
          const id = this.$route.params.id
          const self = this
          if (self.newsForm.status === 0) {
            self.subSaveLoading = true
          } else {
            self.subPushLoading = true
          }
          if (id) {
            NewsApi.updateNews(id, self.newsForm).then(response => {
              self.hideLoading()
              self.$message.success('操作成功')
              self.$router.back()
            }, response => {
              self.hideLoading()
              self.$message.error(response.data.message)
            })
          } else {
            NewsApi.addNews(self.newsForm).then(response => {
              self.hideLoading()
              self.$message.success('操作成功')
              self.$router.back()
            }, response => {
              self.hideLoading()
              self.$message.error(response.data.message)
            })
          }
        },
        hideLoading () {
          if (this.subSaveLoading) {
            this.subSaveLoading = false
          }
          if (this.subPushLoading) {
            this.subPushLoading = false
          }
        },
        uploadSuccess (data) {
          this.newsForm.cover_file_id = data.data.id
        },
        removeFile (data) {
          if (this.newsForm.cover_file_id === data.data.id) {
            this.newsForm.cover_file_id = ''
          }
        }
      }
    }
</script>
<style scoped rel="stylesheet/scss" lang="scss">
    @import "../../../assets/css/form.scss";

</style>
